<template>
  <div class="app-container" v-loading="loadingView">
    <div class="view" v-loading="loading" element-loading-text="正在检测设备状态，请稍后..."
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="topBox">
        <deviceStatus @loadingDevice="loadingFull" />
        <div class="bigTitle">
          <bigTitle />
        </div>
        <div class="creamShow">
          <camera cameraType="1" :place="1" :glassData="cameraA[0]" />
          <camera cameraType="2" :place="2" :glassData="cameraB[0]" />
          <camera cameraType="3" :place="3" :glassData="cameraC[0]" />
        </div>
      </div>
      <el-divider content-position="center">
        <div class="logo">
          <img :src="company_logo" alt="" :style="{ width: '20px', height: '20px' }" />{{ company_name }}
        </div>
      </el-divider>
      <div class="root">
        <div class="tip-list">
          <tips />
        </div>
        <!-- 钢化炉 -->
        <div class="top-left">
          <div class="tempering_box">
            <tempering :lineIndex="1" top="6.8%" :GlassData="A271" :A232="A232" :A301="A301" :A31="A31" :A33="A33"
              :A35="A35" :A36="A36" :A37="A37" :A38="A38" />
            <tempering top="9.2%" :lineIndex="2" :A272="A272" :A233="A233" :A28="A28" :A30="A30" :A29="A29" :A32="A32"
              :A351="A351" :A361="A361" :A39="A39" :A401="A401" />
          </div>
        </div>
        <!-- 理片笼 -->
        <div class="top-center">
          <double :glassData1="afterCatGlass1" :glassData2="afterCatGlass2" :carType="2" />
          <single :glassData="innerCatGlass" />
          <double width="32%" :glassData1="beforeCatGlass1" :glassData2="beforeCatGlass2" :carType="1" />
        </div>
        <!-- 四线 -->
        <div class="top-right">
          <slider top="3%" :glassPostionA="glassListA12" :glassPostionB="glassListB12" :glassPostionC="glassListC12"
            :glassPostionD="glassListD12" textTop="52px" />
          <slider top="26%" :glassPostionA="glassListA22" :glassPostionB="glassListB22" :glassPostionC="glassListC22"
            :glassPostionD="glassListD22" :glassData="A251" :lineNumber="2" textTop="50px" />
          <slider top="54%" height="13%" isBottom :glassPostionA="glassListA32" :glassPostionB="glassListB32"
            :glassPostionC="glassListC32" :glassPostionD="glassListD32" :glassData="A25" :lineNumber="3"
            textTop="10px" />
          <slider top="77%" height="14%" isBottom :glassPostionA="glassListA42" :glassPostionB="glassListB42"
            :glassPostionC="glassListC42" :glassPostionD="glassListD42" :lineNumber="4" textTop="10px" />
        </div>
        <!-- 1，2卧理机 -->
        <div class="top-right-right">
          <div class="wlj-view" @click="handlerOpenView(1)">
            {{ recumetGlass.length }}
          </div>
          <div class="wlj-view2" @click="handlerOpenView(2)">
            {{ recumetGlass2.length }}
          </div>
          <div class="wlj-view3" @click="handlerOpenView(3)">
            {{ recumetGlass3.length }}
          </div>
          <div class="recumentBox" :style="{ top: 35 + 'px', left: 10 + 'px' }" @click="handerGoUrl(1, 0)">
            <i v-if="false" class="el-icon-warning-outline"></i>
          </div>
          <div class="recumentBox" :style="{ top: 275 + 'px', left: 10 + 'px' }" @click="handerGoUrl(1, 1)">
            <i v-if="false" class="el-icon-warning-outline"></i>
          </div>
          <div class="showGlass" style="top: 19%; right: 0" v-for="item in waitGlassRecumentLine" :key="item.id"
            :class="'A' + item.id"></div>
          <div class="showGlass" style="top: 80%; right: 0" v-for="item in waitGlassRecumentLine2" :key="item.id"
            :class="'A' + item.id"></div>
          <div class="showGlass" style="bottom: -55%; right: 0" v-for="item in waitGlassRecumentLine3" :key="item.id"
            :class="'A' + item.id"></div>
        </div>
        <!-- 五号线 -->
        <slider top="52%" height="32%" :glassPostionA="glassListA52" :glassPostionB="glassListB52"
          :glassPostionC="glassListC52" :glassPostionD="glassListD52" :lineNumber="5" textTop="10px" />
        <div class="bottom-right">
          <div class="recumentBox" :style="{ top: 20 + 'px', left: 32 + 'px' }" @click="handerGoUrl(1, 2)">
            <i v-if="false" class="el-icon-warning-outline"></i>
          </div>
        </div>
        <div class="bottom-left">
          <DobuleCage />
        </div>
        <div class="bottom-center">
          <to-right-slider :speed="110" place="ZkLine1" />
          <to-right-slider top="4%" :speed="130" place="ZkLine2" />
          <to-right-slider top="4%" :speed="120" place="ZkLine3" />
          <to-right-slider top="6%" :textPostion="['52%', '20%']" :speed="70" place="ZkLine4" />
        </div>
        <!-- 状态灯 -->
        <div class="light">
          <!-- 卧理机 状态灯 -->
          <div class="circle" v-for="(item, index) in Recumentlight" :key="index"
            :style="{ right: item.right, top: item.top }">
            <div v-if="recumentStatusList.length != 0" :class="recumentStatusList[index][0] | devicePlcStatus"></div>
          </div>
          <!-- 磨边机状态灯 -->
          <div class="circle" v-for="(item, index) in edgeLigght" :key="item.id"
            :style="{ right: item.right, top: item.top }">
            <div v-if="edgeStatusList.length != 0" :class="edgeStatusList[index][4] | edgeDevicePlcStatus"></div>
          </div>
          <!-- 清洗机状态灯 -->
          <div class="circle" v-for="(item, index) in cleanLight" :key="item.id"
            :style="{ right: item.right, top: item.top }">
            <div v-if="cleanStatusList.length != 0" :class="cleanStatusList[index][4] | cleanDevPlcStatus"></div>
          </div>
        </div>
        <el-dialog :title="`${recument[showCurrnet - 1].name}`" :visible.sync="dialogVisiblewlj"
          :header-cell-style="{ 'text-align': 'center' }" width="80%">
          <div class="showBody">
            <Macine :glassList="showData" :radio="showCurrnet" />
            <glassTable :tableData="showData" />
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import slider from "./components/slider.vue";
import double from "./components/double.vue";
import single from "./components/single.vue";
import tempering from "./components/tempering.vue";
import glassTable from "@/views/components/production/glassTable.vue";
import anime from "animejs";
import deviceStatus from "./components/deviceStatus.vue";
import bigTitle from "./components/bigTitle.vue";
import camera from "./components/camera.vue";
import tips from "./components/tips.vue";
import Macine from "@/views/components/production/macine.vue";
import DobuleCage from "@/views/iFactory/fullview/components/dobuleCage.vue";
import toRightSlider from "./components/toRightSlider.vue";
import { recument } from "@/views/dmonitor/machine/config/radio";
import mixin from "./mixin/index";
import { allDB } from "@/config/db";
import { mapGetters, mapState } from "vuex";
import { Recumentlight, edgeLigght, cleanLight } from "./config/light";
import { loadImage } from "@/utils/cacheImg";

export default {
  components: {
    slider,
    double,
    single,
    tempering,
    glassTable,
    deviceStatus,
    bigTitle,
    camera,
    tips,
    Macine,
    DobuleCage,
    toRightSlider,
  },
  mixins: [mixin],
  data() {
    return {
      selected: 0,
      cleanLight,
      edgeLigght,
      Recumentlight,
      recument,
      loading: false,
      dialogVisiblewlj: false,
      showData: [],
      showCurrnet: 1,
      readEnd: sessionStorage.getItem("readCode") || [],
      isred: 6,
      isred2: 8,
      redTime: null,
      loadingView: true,
    };
  },
  created() {
    // 缓存图片
    loadImage(require("@/assets/images/ful3Dmax3.png")).then(() => {
      this.loadingView = false;
    });
  },
  methods: {
    // a 设备名 b 具体哪个设备
    handerGoUrl(a, b) {
      this.$router.push({ name: "Device", params: { check: b, radio: a } });
    },
    animeTranform(index, Id) {
      anime({
        targets: ".A" + Id,
        keyframes: [{ translateX: -115 + index * 30, duration: 1 }],
        easing: "linear",
        loop: false,
      });
    },
    loadingFull() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success("设备运行正常");
      }, 2000);
    },
    handlerOpenView(e) {
      let map = {
        1: this.recumetGlass,
        2: this.recumetGlass2,
        3: this.recumetGlass3,
      };
      this.showData = map[e] || [];
      this.showCurrnet = e;
      this.dialogVisiblewlj = true;
    },
  },
  mounted() {
    clearInterval(this.timer);
    this.redTime = setInterval(() => {
      this.isred = this.isred == 0 ? 6 : this.isred - 1;
      this.isred2 = this.isred2 == 0 ? 8 : this.isred2 - 1;
    }, 1000);

    this.$store.dispatch("listGlass");
    this.$store.dispatch("getDeviceSignal", allDB);
    this.$store.dispatch("AllCameraScanGlass");

    this.timer = setInterval(() => {
      this.$store.dispatch("listGlass");
      setTimeout(() => {
        this.$store.dispatch("getDeviceSignal", allDB);
      }, 3000);
      setTimeout(() => {
        this.$store.dispatch("AllCameraScanGlass");
      }, 6000);
    }, 20000);
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.timredTimeer);
    clearInterval(this.redTime);
  },
  computed: {
    ...mapState({
      allCameraGlass: (state) => {
        return state.deviceStatus.allCameraList;
      },
    }),
    ...mapGetters({
      recumentStatusList: "recumentStatusList",
      edgeStatusList: "edgeStatusList",
      cleanStatusList: "cleanStatusList",
    }),
    cameraA() {
      return this.allCameraGlass.filter((item) => item.cameraId == 1);
    },
    cameraB() {
      return this.allCameraGlass.filter((item) => item.cameraId == 2);
    },
    cameraC() {
      return this.allCameraGlass.filter((item) => item.cameraId == 3);
    },
  },
  watch: {},
  filters: {
    devicePlcStatus(arg) {
      let readArr = [0, 4, 8];
      let readWriteArr = [20];
      let arr = ["circle-stop", "circle-forbid", "circle-active"];
      if (readArr.includes(arg.addr)) {
        if (arg.message == -1) return arr[0];
        if (arg.message == 0) return arr[2];
        if (arg.message == 1) return arr[2];
      }

      if (readWriteArr.includes(arg.addr)) {
        if (arg.message == -1) return arr[0];
        if (arg.message == 0) return arr[1];
        if (arg.message == 1) return arr[1];
        if (arg.message == 2) return arr[2];
        if (arg.message * 1 == 3) return arr[1];
      }
    },
    edgeDevicePlcStatus(arg) {
      let arr = ["circle-stop", "circle-forbid", "circle-active"];
      if (arg.message * 1 == -1) return arr[0];
      if (arg.message * 1 == 0) return arr[2];
      if (arg.message * 1 == 1) return arr[1];
      if (arg.message * 1 == 2) return arr[2];
      if (arg.message * 1 == 3) return arr[1];
    },
    cleanDevPlcStatus(arg) {
      let arr = ["circle-stop", "circle-forbid", "circle-active"];
      if (arg.message * 1 == -1) return arr[0];
      if (arg.message * 1 == 0) return arr[2];
      if (arg.message * 1 == 1) return arr[2];
      if (arg.message * 1 == 2) return arr[2];
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./style/index.less");
</style>
